<template>
	<view class="content">
		<!--头部-->
        <view class="d-kuan pc-dingbu">
            <DToubu @clear-audio="clearAllAudio"></DToubu>

        </view>
        
		<!--头部-->
		<!--下面内容-->
		<view class="d-kuan d-buhuanhang">
			<!--左边导航-->
			<view class="d-daohang d-you-10" id="zuo-daohang" :style="{height: leftNavHeight}">
				<view class="d-daohang-5">
						<Ddaohang></Ddaohang>
					</view>

				<!-- 左边一级导航 -->
				<!--view class="d-daohang-zuo">
    			  <view 
    			    v-for="(dao,index) in daohang" 
    			    :key="index" 
    			    class="d-yiji"
    			    :class="{'active': activeIndex === index}"
    			    @click="yiji(index)"
    			  >
    			    {{ dao.name }}
    			  </view>
    			</view-->
    			<!-- 右边二级导航 -->
    			<!--view class="d-daohang-you" v-if="daohang.length > 0 && activeIndex >= 1">
    			  <view 
    			    v-for="(er,index) in erjidata" 
    			    :key="index" 
    			    class="d-erji"
					:class="{'active': erjiindex === index}"
    			    @click="erji(index)"
    			  >
    			    {{ er.name }}
    			  </view>
    			</view-->

			</view>
			<!--左边导航-->
			<!--右边内容-->
			<view class="d-kuan" style="margin-left: 520rpx">
				<uv-row customStyle="margin-bottom: 10px;align-items: flex-start;" :gutter="20">
					<uv-col span="6">
                        <uv-navbar leftText="返回" :fixed="false" title="创建课程" :safeAreaInsetTop="false" customStyle="border-radius: 20rpx;" bgColor="#f3f3f3">
		                	<template v-slot:left >
		                		<view class="uv-nav-slot" @click="fanhui">
		                			<uv-icon name="arrow-left" size="19" ></uv-icon>
		                			<!--uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line-->
		                			<!--uv-icon name="home" size="20"></uv-icon-->
		                		</view>
		                	</template>
		                </uv-navbar>
						<uv-row customStyle="margin-top: 10px;flex-wrap: wrap" :gutter="20" >
							<uv-col span="12">
                                
								
								<view class="beijing-3 d-kuan d-buhuanhang d-xia-20 d-piaofu-0">
									<!--图片-->
									<view class="d-zuo d-tu-kuan-210 d-piaofu-0">
										<view class="d-piaofu-1">免费</view>
										<uv-image src="/static/img/001.jpeg" width="300rpx" height="420rpx" radius="10"></uv-image>
									</view>
									<view class="d-kuan d-neikuang-10">
										<uv-form labelPosition="left" :model="kecheng" ref="form">
											<uv-form-item label="标题" prop="kecheng.biaoti" borderBottom>
												<uv-input v-model="kecheng.biaoti" border="none">
												</uv-input>
											</uv-form-item>
											<uv-form-item label="简介" prop="kecheng.jianjie" borderBottom>
												<uv-input v-model="kecheng.jianjie" border="none">
												</uv-input>
											</uv-form-item>
											<uv-form-item label="模式" prop="kecheng.moshi" borderBottom>
												<uv-radio-group v-model="radiovalue">
													<uv-radio 
														:customStyle="{margin: '8px'}" 
														v-for="(item, index) in radiolist" 
														:key="index" 
														:label="item.name" 
														:name="item.name">
													</uv-radio>
												</uv-radio-group>
												
												
												
											</uv-form-item>
											<uv-form-item label="价格" prop="kecheng.jiage" borderBottom>
												<uv-input v-model="kecheng.jiage" border="none">
												</uv-input>
											</uv-form-item>
											<uv-form-item label="分类" prop="kecheng.fenlei" borderBottom>
												<uv-input v-model="kecheng.fenlei" border="none">
												</uv-input>
											</uv-form-item>


										</uv-form>
									</view>
								</view>
							</uv-col>


						</uv-row>
						<view class="d-kuan">    
                            <uv-button type="warning" custom-style="borderRadius: 40rpx" size="normal" > 提 交 </uv-button>
                        </view>

						<!--内容-->
                        
                        <view class="d-kuan" >
                            <view class="d-kuan d-shangxia-30 d-beijing-huise d-yuanjiao-10">
                                <view class="d-neikuang-10">
                                    <view class="d-jiacu d-wenzi-20">购买必知</view>
                                    <view class="d-shangxia-5">1.《<text class="d-wenzi-yanse-hongse">{{kecheng.biaoti}}</text>》为“音频+图文”内容；包含授课音频、完整讲义文稿以及学员问答。</view>
                                    <view class="d-shangxia-5">2.本产品为付费课程，共***元，购买成功后，即可永久性使用该产品所有内容。</view>
                                    <view class="d-shangxia-5">3.本产品为虚拟内容服务，一经购买成功，概不退款，请你理解。</view>
                                
                                </view>
                                 
                            </view>
                        </view>
						<!--内容-->
					</uv-col>
				</uv-row>
                

			</view>
			<!--右边内容-->

		</view>
		<!--下面内容-->
		

			


	</view>
</template>

<script>
    import DToubu from '@/components/d-toubu/d-toubu.vue';
	import NlAudioPlayer from '@/uni_modules/nl-audio-player/components/nl-audio-player/nl-audio-player.vue';
	import HbComment from '@/uni_modules/hb-comment/components/hb-comment/hb-comment.vue'; // 添加这行
	export default {
		data() {
			return {
				title: 'Hello',
				leftNavHeight: '500rpx', // 默认高度
                rightColWidth: '50%', // 默认宽度

                neirong_id_data:1,
				erjidata:[],
				erjiindex:'',//当前激活的二级菜单索引
				activeIndex: -1, // 当前激活的一级菜单索引

				content: `
                    <p>这是一个段落。</p>
                    <p>这是另一个段落。</p>
                `,
                yuedu:false,
				audioUrl:'/static/mp3/mp3.mp3',
				pinglunzxianshi:0,
				like_1: false, // 确保所有模板中用到的属性都已定义
				tiwenneirong:'',
				kecheng: {
					biaoti: '',
					jiage:'',
					jianjie: '',
					moshi: '',
					neirong: '',
					
				},
				radiovalue: '免费', // 默认选中的值，应该与某个
				radiolist: [
					{
						name: '免费',
						disabled: false
					}, {
						name: '付费',
						disabled: false
					}

				],

			}
		},
        components: {
          DToubu,
		  NlAudioPlayer,
		  HbComment // 添加这行
        },
		mounted() {
    	    this.setLeftNavHeight();
            this.getRightColWidth(); // 添加这行
    	    // 添加窗口大小变化监听
    	    window.addEventListener('resize', this.setLeftNavHeight);
            window.addEventListener('resize', this.getRightColWidth); // 添加窗口大小变化监听
    	},
    	beforeDestroy() {
    	    // 移除监听
    	    window.removeEventListener('resize', this.setLeftNavHeight);
            window.removeEventListener('resize', this.getRightColWidth); // 添加这行
			this.clearAllAudio();
    	},
		onLoad() {
			
		},
		onUnload() {
  		  this.clearAllAudio();
  		},
		methods: {
			// ...其他方法保持不变...
			yiji(index) {
    		  // 切换激活的一级菜单
    		  this.activeIndex = index;
    		  // 根据激活的一级菜单显示对应的二级菜单
    		  this.erjidata = this.daohang[index].erji;
			  console.log(this.erjidata);
    		},
			erji(index) {
    		  // 切换激活的二级菜单
    		  this.erjiindex = index;
    		},
			toggleErji(index) {
    		  if (this.activeIndex === index) {
    		    // 点击已激活的菜单，收起二级菜单
    		    this.activeIndex = -1;
    		    this.currentErji = [];
    		  } else {
    		    // 点击新的菜单，显示对应的二级菜单
    		    this.activeIndex = index;
    		    this.currentErji = this.daohang[index].erji;
    		  }
    		},
			setLeftNavHeight() {
        	    // 获取系统信息
        	    const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowHeight;
        	    const headerHeight = 60; // 头部高度估计值
        	    const calculatedHeight = windowHeight - headerHeight;
				
        	    // 设置左边导航高度
        	    this.leftNavHeight = `${calculatedHeight}px`;
        	},
            // ...其他方法...
             getRightColWidth() {
               this.$nextTick(() => {
                 const query = uni.createSelectorQuery().in(this);
                 query.select('#youbiankuan').boundingClientRect(rect => {
                   if (rect) {
                     this.rightColWidth = `${rect.width-20}px`;
                     console.log('右侧列宽度:', this.rightColWidth);
                   }
                 }).exec();
               });
             },
            // 返回
            fanhui() {
				// 先清理音频
				this.clearAllAudio();
               // 获取页面栈
                 const pages = getCurrentPages();
                 // 如果页面栈长度小于等于1，说明没有上一级页面
                 if (pages.length <= 1) {
                    console.log('没有上一级页面');
                    uni.reLaunch({
                      url: '/pages/index/index'
                    });
                 } else {
                    // 有上一级页面则返回
                    uni.navigateBack({
                      delta: 1
                    });
                }
            },
            neirong_id(e){
                this.neirong_id_data = e.id;
                console.log(e.id);
            },
            tiwen(e){
                console.log('tiwen',e);
                this.yuedu = true;
            },
            yudu(e){
                console.log('yudu',e);
                this.yuedu = true;
            },
            guanbi(){
                this.yuedu = false;
				if(this.$refs.audioPlayer) {
    			  const audioCtx = this.$refs.audioPlayer.getAudioContext();
    			  audioCtx.stop();
    			  audioCtx.destroy();
    			}
            },
			// 关闭播放音频
			clearAllAudio() {
    		  if(this.$refs.audioPlayer) {
    		    const audioCtx = this.$refs.audioPlayer.getAudioContext();
    		    audioCtx.stop();
    		    audioCtx.destroy();
    		  }
    		},
			add(e) {
    		  console.log('add', e);
    		  // 这里可以添加评论逻辑
    		},
    		del(e) {
    		  console.log('del', e);
    		  // 这里可以删除评论逻辑
    		},
    		like(e) {
    		  console.log('like', e);
    		},
			focusOn(e) {
    		  console.log('focusOn', e);
    		},
			tiwenzhi(){
                this.pinglunzxianshi = this.pinglunzxianshi === 1 ? 0 : 1;
				if(this.pinglunzxianshi === 1) {
                    this.$nextTick(() => {
                        setTimeout(() => {
                            const textarea = this.$refs.commentTextarea?.$el?.querySelector('textarea');
                            if(textarea) {
                                textarea.focus();
                                // 将光标移动到文本末尾
                                const length = textarea.value.length;
                                textarea.setSelectionRange(length, length);
                            }
                        }, 100);
                    });
                }
                
				console.log('pinglun',this.pinglunzxianshi);
            },
			// ... existing methods ...
			handleBlankClick(e) {
				const isCommentArea = e.target.closest('.d-pinglun-2') || 
			                        e.target.closest('.d-tijiao-0') ||
			                        e.target.closest('.uv-search') ||
			                        e.target.closest('.uv-textarea');
			
			    // 如果点击的是非评论区域且评论框是显示状态，则关闭评论框
			    if(!isCommentArea && this.pinglunzxianshi === 1) {
			        this.pinglunzxianshi = 0;
			    }
    		},
			handleTextareaBlur() {
    		    //this.pinglunzxianshi = 0;
				setTimeout(() => {
    			    this.pinglunzxianshi = 0;
    			}, 300);
    		},
			//提交问答
			tijiao_wenda(){
			    console.log('提交问答');
			    //this.pinglunzxianshi = 0;
			    // 这里可以添加提交问答的逻辑
				//显示提交成功
				uni.showToast({
				  title: '提交成功',
				  icon: 'success',
				  duration: 2000
				});
				//清空输入框
				this.tiwenneirong = '';
				// 延迟关闭评论框，确保点击事件完成
				setTimeout(() => {
    			    this.pinglunzxianshi = 0;
    			}, 200);
			}

		}
	}
</script>

<style scoped lang="scss">

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		/*justify-content: center;*/
		background-color: #f3f3f3;
        padding-top: 70px;
		height: calc(100vh - 0px); /* 添加全屏 */
		width: 100vw; /* 添加全屏*/

		
		
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* 屏幕宽度大于786px时隐藏uni-page-head */
    @media (min-width: 786px) {
        uni-page-head {
            display: none !important;
            opacity: 0 !important;
            height: 0 !important;
            visibility: hidden !important;
        }
    }
	/*.d-daohang{
		display: flex;
		width: 400rpx;
	}*/
	/* 添加在style部分 */
	.d-daohang-zuo {
    position: fixed;
    left: 0;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #f5f5f5;
    z-index: 100;
	box-shadow: 2px 0 5px rgba(177, 177, 177, 0.1);
  }
  
  .d-daohang-you {
    position: fixed;
    left: 180rpx;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #fff;
    z-index: 999;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
  .d-erji-item {
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
   /* border-bottom: 1px solid #f0f0f0;*/
  }
  
  .d-erji-item:active {
    background: #f5f5f5;
  }
  @mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
        
	}
    ::v-deep .uv-navbar {
      border-radius: 20rpx;
    }
    .you-guding {
        
        position: fixed;
        right: 0;
        top: 60px; /* 根据头部高度调整 */
        width: calc(25% - 10px); /* span="6" 对应25%宽度，减去一半的gutter间距 */
        
        

    }
	/*@font-face {
		font-family: 'icon';
		src: url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.woff2?t=1749392833400') format('woff2'), url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.woff?t=1749392833400') format('woff'),
			url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.ttf?t=1749392833400') format('truetype');
	}*/

	.audio-control-wrapper {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'icon' !important;
	}

	.audio-control {
		font-size: 62rpx;
		line-height: 1;
		padding: 16rpx;
		color: #12d1b1;
		font-size: 80rpx;
	}

	.audio-control-prev {
		transform: rotate(180deg);
	}

	.audio-control-switch {
		font-size: 80rpx;
		margin: 0 100rpx;
	}


	
</style>
